<template>
    <view style="height: 100%">
        <!-- pages/proList/proList.wxml -->
        <!-- 搜索 -->
        <view class="searchBar algin">
            <input class="search-input" @focus="linkSearch" placeholder="搜索您要的商品" :value="key" />
        </view>

        <view :if:wx="Rows.length > 1" class="tabBar stretch around">
            <block :if:wx="Rows.length > 1" v-for="(item, idx) in Rows" :key="idx">
                <view
                    @tap="changeTab"
                    :data-index="idx"
                    :data-info="item"
                    class="tabItem"
                    :style="'color:' + (tabType == idx ? color : '') + ';border-bottom: 2rpx ' + (tabType == idx ? color : '#fff') + ' solid;'"
                >
                    {{ item.Fname }}
                </view>
            </block>
        </view>
        <!-- 商品列表（一行两列） -->
        <view v-if="proData.length > 0" class="onerow_twoclo">
            <view class="pro_list wrap between">
                <view class="pro_item" v-for="(item, idx) in proData" :key="idx">
                    <navigator :url="'/pages/proDetail/proDetail?Ftype=3&Ftypeid=' + item.Fid" hover-class="none">
                        <view class="pro_pic">
                            <image mode="aspectFill" :src="item.Fhimg"></image>
                        </view>
                        <view class="pro_text">
                            <view class="pro_name">【{{ item.Fbrand }}】 {{ item.Fsummary }}</view>
                            <view class="pro_price v-center between">
                                <text class="dis_price">￥{{ item.Flowprice }}</text>
                                <text class="buynum">已售{{ item.Fpersonnum }}</text>
                            </view>
                        </view>
                    </navigator>
                </view>
            </view>
        </view>
        <view v-else class="blank">
            <view class="algin">
                <image mode="widthFix" class="noImg" src="/static/file/images/nolist.png"></image>
            </view>
            <view class="no_msg_text algin">没有找到您要找的商品~~~</view>
        </view>
    </view>
</template>
<script>
// pages/proList/proList.js
var util = require('../../utils/util.js');
var api = require('../../utils/prom.js'); 
export default {
    data() {
        return {
            color: app.globalData.color,
            source: '',
            // 0  根据分类  1  根据关键字
            key: '',
            Fmuti: 0,
            //判断是否是多分类
            tabType: 0,
            Rows: [],
            proData: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var that = this;
        var id = options.Ftypeid;
        if (id.indexOf(',') > 0) {
            var param = {
                token: uni.getStorageSync('token'),
                ids: id
            };
            api.request('SpType', 'get', param, function (res) {
                that.Rows =  res.data.Rows;
                if (res.data.Rows.length > 0) {
                    var row = res.data.Rows[0];
                    that.typeList(row.Fid);
                }
            });
        } else {
            that.typeList(id);
        }
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        return {
            title: app.globalData.shareinfo.title,
            imageUrl: app.globalData.shareinfo.img,
            desc: app.globalData.shareinfo.desc,
            path: 'pages/index/index?Fid=' + uni.getStorageSync('uid')
        };
    },
    methods: {
        //根据分类id查询
        typeList: function (id) {
            var that = this;
            var param = {
                token: uni.getStorageSync('token'),
                ftypeid: id
            };
            api.requestAll('SpTypeP', 'get', param, function (res) {
                that.proData =  res.data.Rows;
            });
        },

        linkSearch: function () {
            uni.navigateTo({
                url: '/pages/searchPage/searchPage'
            });
        },

        changeTab: function (e) {
            var that = this;
            var data = e.currentTarget.dataset.info;
            that.typeList(data.Fid);
            that.tabType =  e.currentTarget.dataset.index;
        }
    }
};
</script>
<style>
@import './proList.css';
</style>
